<template>
  <div class="add_editor_article">
    <div class="article">
      <div class="title">{{ this.articleId ? "修改文章" : "新建文章" }}</div>
      <el-tabs type="border-card" v-model="activeName">
        <el-tab-pane name="one" label="基本属性">
          <Base
            ref="base"
            v-bind:articleForm.sync="articleForm"
            v-bind.sync="articleForm"
            @biaotiTupian="changeBiaotiTupian"
            class="article-base"
          >
          </Base>
        </el-tab-pane>
        <el-tab-pane name="two" label="附件">
          <File
            v-bind:articleForm.sync="articleForm"
            v-bind.sync="articleForm"
            :historyAttr="historyAttr"
          ></File>
          <!-- <File v-bind:articleForm.sync='articleForm' v-bind:attachment.sync='articleForm.attachment'></File> -->
        </el-tab-pane>
      </el-tabs>
    </div>
    <el-row
      :gutter="10"
      class="grid-content btn_wrap_bottom"
      type="flex"
      justify="end"
    >
      <el-col :span="1.5">
        <el-button type="cyan" round @click="handleSubmitArticle"
          >保存</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button type="cyan" round @click="handleCacle">取消</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Base from "./components/base";
import File from "./components/file";

import { deepClone } from "@/utils";
import { validHttp } from "@/utils/validate";
import {
  getLibraryList,
  addLibrary,
  editLibrary,
  getLibraryArticle,
  delLibraryArticleList,
} from "@/api/content/library";

export default {
  metaInfo() {
    return {
      title: this.articleId ? "修改文章" : "新建文章",
      titleTemplate: (title) => {
        return title;
      },
    };
  },
  props: {},
  data() {
    return {
      //tab 标签
      activeName: null,
      articleId: this.$route.query.articleId,
      type: this.$route.query.type,
      articleForm: {},

      //历史文件
      historyAttr: [],
    };
  },

  components: { Base, File },

  computed: {},
  async created() {
    this.$nextTick(() => {
      this.$refs.base.change1(1);
      this.articleId ? this.getArticleDetail() : this.reset();
    });
  },
  mounted() {},

  watch: {},

  methods: {
    //获取文章内容
    getArticleDetail() {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });

      this.articleId &&
        getLibraryArticle({ articleId: this.articleId })
          .then((res) => {
            if (res.data.body == null) res.data.body = "";
            this.articleForm = res.data;
            this.historyAttr = deepClone(res.data.attachment);
            console.log("  this.articleForm: ", this.articleForm);
          })
          .then(async () => {
            await this.$nextTick(() => {
              loading.close();
              this.activeName = "one";
            });
          });
    },

    //提交发布文章
    handleSubmitArticle() {
      this.articleForm.dept1 = Array.isArray(this.articleForm.dept1)
        ? this.articleForm.dept1[1]
        : this.articleForm.dept1;
      this.articleForm.dept2 = Array.isArray(this.articleForm.dept2)
        ? this.articleForm.dept2[1]
        : this.articleForm.dept2;
      this.articleForm.dept3 = Array.isArray(this.articleForm.dept3)
        ? this.articleForm.dept3[1]
        : this.articleForm.dept3;
      this.articleForm.dept4 = Array.isArray(this.articleForm.dept4)
        ? this.articleForm.dept4[1]
        : this.articleForm.dept4;
      this.articleForm.dept5 = Array.isArray(this.articleForm.dept5)
        ? this.articleForm.dept5[1]
        : this.articleForm.dept5;
      this.articleForm.dept6 = Array.isArray(this.articleForm.dept6)
        ? this.articleForm.dept6[1]
        : this.articleForm.dept6;
      this.articleForm.dept7 = Array.isArray(this.articleForm.dept7)
        ? this.articleForm.dept7[1]
        : this.articleForm.dept7;
      this.articleForm.dept8 = Array.isArray(this.articleForm.dept8)
        ? this.articleForm.dept8[1]
        : this.articleForm.dept8;
      console.log("this.articleForm: ", this.articleForm);

      if (
        validHttp(this.articleForm.articleTemplate) ||
        validHttp(this.articleForm.channelTemplate) ||
        validHttp(this.articleForm.listTemplate.template)
      ) {
        this.$confirm(
          "文章内容中包含IP地址，可能涉及IP泄露问题，确认继续操作吗？",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",

            type: "warning",
            closeOnClickModal: false,
            closeOnPressEscape: false,
            showClose: false,
          }
        )
          .then(() => {
            if (this.articleForm.articleId) {
              this.articleEditor();
            } else {
              this.articleAdd();
            }
          })
          .catch(() => {
            return;
          });
      } else {
        if (this.articleForm.articleId) {
          this.articleEditor();
        } else {
          this.articleAdd();
        }
      }
    },
    articleAdd() {
      this.$refs["base"].$refs["articleForm"].validate((valid) => {
        if (valid) {
          addLibrary(this.articleForm).then((res) => {
            if (res.code == 200) {
              this.msgSuccess("操作成功");
              localStorage.setItem("articleFlag", true);
              setTimeout(() => {
                this.closeWindow();
              }, 500);
            } else {
              this.msgError(res.msg);
            }
          });
        } else {
          return false;
        }
      });
    },
    articleEditor() {
      // this.articleForm.ifSaveForA = 2;
      editLibrary(this.articleForm).then((res) => {
        if (res.code == 200) {
          this.msgSuccess("操作成功");
          localStorage.setItem("articleFlag", true);
          setTimeout(() => {
            this.closeWindow();
          }, 500);
        } else {
          this.msgError(res.msg);
        }
      });
    },

    //上传标题图片 后  回调 修改image
    changeBiaotiTupian(obj) {
      if (obj) {
        this.articleForm.image = [
          {
            articleId: this.articleId,
            id: null,
            realName: obj.realName,
            sequence: 0,
            storeName: obj.storeName,
            titleImg: 1,
          },
        ];
        this.articleForm.imgNews = 1;
      } else {
        this.articleForm.image = [];
        this.articleForm.imgNews = 0;
      }
    },

    //取消
    handleCacle() {
      this.$confirm("您确定要取消文章编辑吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.closeWindow();
        })
        .catch(() => {
          return;
        });
    },
    reset() {
      this.articleForm = {
        attachment: [],
        loginId: this.$store.getters.loginId,
        userId: this.$store.getters.userId,
        articleId: this.$route.query.articleId || null,
        type: this.type == "persional" ? 0 : 1,
        xgsname: null,
        zrbjr: null,
        subheadLocation: 0,
        subheadLocation2: 0,
        time: null, //排序时间
        createdDate: null,
        expiredDate: this.parseTime(new Date("2099-12-31"), "{y}-{m}-{d}"),
        expiredDateForIndex: this.parseTime(
          new Date("2099-12-31"),
          "{y}-{m}-{d}"
        ),

        header: "",
        kicker: "",
        summary: "",
        externalLinks: "",

        author1: "",
        author2: "",
        author3: "",
        author4: "",
        author5: "",
        author6: "",
        author7: "",
        author8: "",
        body: "",

        dept1: undefined,
        dept2: undefined,
        dept3: undefined,
        dept4: undefined,
        dept5: undefined,
        dept6: undefined,
        dept7: undefined,
        dept8: undefined,
      };

      this.$nextTick(() => {
        this.activeName = "one";
      });
    },
  },
  beforeDestroy() {},
};
</script>

<style scoped lang="scss">
@import "~@/assets/styles/el-form.scss";
::v-deep .w-e-text-container {
  // flex: unset;
  // height: 600px;
  // min-height: 600px;
}
.add_editor_article {
  width: 80%;
  margin: 0 auto;
  height: 100vh;
  position: relative;
  // overflow: overlay; overflow: auto;

  .btn_wrap_bottom {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1000;
    margin-bottom: 0;
    height: 64px;
    justify-content: center;
    align-items: center;
    border-top: 1px solid #e8e8e8;
  }

  .article {
    padding: 40px 0 80px;
    height: 100%;
    position: relative;

    .title {
      height: 40px;
      line-height: 40px;
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      color: #000;
      font-weight: bold;
      text-align: center;
      font-size: 20px;
    }
  }
}

::v-deep .el-tabs {
  display: flex;
  flex-direction: column;
  .el-tabs__content {
    overflow: auto;
    flex: 1;
  }
}
</style>
<style>
#app {
  height: auto;
  min-height: 100% !important;
  overflow: inherit;
}
.el-popover {
  padding-top: 0;
  height: 500px;
}
.el-timeline {
  height: 500px;
  overflow-y: auto;
  overflow-x: hidden;
}
</style>
